<template>
<div>
  <!--新增-->
  <basic-modal ref="monthlyTicketModal" customeClass="monthly-ticket-modal" width="700" static="true">
    <h3 slot="title">{{mouthTicketData.ticketModalName}}</h3>
    <div class="modal-body" slot="modal-body" style="padding:0px">
      <div class="btnGroup">
        <div @click="selectMonthTicketInfoTab('basicTab')" class="btnItem" :class="{activeText:mouthTicketData.tabName=='basicTab'}">
          <span class="step-icon" :class="{activeTab:mouthTicketData.tabName=='basicTab'}">1</span>
          <span class="step-text">基础信息</span>
        </div>
        <div @click="selectMonthTicketInfoTab('higherTab')" class="btnItem" :class="{activeText:mouthTicketData.tabName=='higherTab'}">
          <span class="step-icon" :class="{activeTab:mouthTicketData.tabName=='higherTab'}">2</span>
          <span class="step-text">高级配置</span>
        </div>
      </div>
      <el-form :model="mouthTicketData.baseTicketData" ref="ticketForm" label-position="left" :rules="rules" label-width="90px" style="padding: 30px 0; width: 500px;">
        <!-- 基础信息 start -->
        <div v-show="mouthTicketData.tabName=='basicTab'" class="basicTab-box">
          <el-form-item label="支持车场" prop="parkJson">
            <div class="el-form--inline">
              <template v-if="selectedParkingLot.length">
                <el-tooltip placement="bottom-start">
                  <div slot="content">
                    <ul class="selectParkingLotTree">
                      <li v-for="item in selectedParkingLot" style="margin-bottom: 4px; font-size: 12px;">
                        {{ item.name }}
                        <ul v-for="it in item.children">
                          <li>{{it.name}}</li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                  <div class="selected-parkingLot">{{selectedParkingLotStr}}</div>
                </el-tooltip>
              </template>

              <div v-if="!selectedParkingLot.length" class="selected-parkingLot grayTip">未选择任何停车场</div>

              <el-button size="small" type="primary" @click="openSelectParkModal" class="select-park-btn ake_btn_text">设置</el-button>
            </div>
          </el-form-item>

          <!-- <el-form-item label="特殊车辆类型" prop="vipGroupType" >
              <template>
                <el-radio class="radio" v-model="mouthTicketData.baseTicketData.vipGroupType" :label="2">黑名单</el-radio>
                <el-radio class="radio" v-model="mouthTicketData.baseTicketData.vipGroupType" :label="1">访客</el-radio>
                <el-radio class="radio" v-model="mouthTicketData.baseTicketData.vipGroupType" :label="3">预定</el-radio>
              </template>
            </el-form-item>-->

          <el-form-item label="类型名称" prop="name">
            <el-input placeholder="请输入类型名称" v-model="mouthTicketData.baseTicketData.name"></el-input>
          </el-form-item>

          <el-form-item label="简介" prop="description">
            <el-input type="textarea" placeholder="请输入简介" v-model="mouthTicketData.baseTicketData.description"></el-input>
          </el-form-item>
        </div>
        <!-- 基础信息 end -->

        <!-- 高级配置 start -->
        <div v-show="mouthTicketData.tabName=='higherTab'" class="higherTab-box">
          <el-form-item label="多车多位">
            <div class="inline-row">
              <el-checkbox v-model="vipTypeData.isDynamicMode" v-bind:true-label="1" v-bind:false-label="0"></el-checkbox>
              <div class="tipsBox" style="top:2px;left:10px">
                <i class="el-icon-question"></i>
                <div class="tips">
                  <p>可开通≥2个车位</p>
                </div>
              </div>
            </div>

            <!-- <el-form-item
                label
                label-width="20px"
                v-show="vipTypeData.isDynamicMode"
                style="margin-bottom:0px;"
              >
                <el-checkbox
                  v-model="vipTypeData.autoSwitchVip"
                  :true-label="1"
                  :false-label="0"
                >支持场内切换</el-checkbox>
              </el-form-item>-->

            <el-form-item label-width="0px" v-show="vipTypeData.isDynamicMode" style="margin-bottom:0px;">
              <el-checkbox class="sp-checkbox" v-model="vipTypeData.dynamicFullLimit" v-bind:true-label="1" v-bind:false-label="0">内场多位多车满位到剩余，同一VIP票车辆外场已在场车辆无法进入内场</el-checkbox>
              <div class="tipsBox" style="right:-24px;top:-5px;">
                <i class="el-icon-question"></i>
                <div class="tips right">
                  <p>外场A区域，内场B区域，一组车辆在B区域是多位多车，B区域车位从满到余时，同组车A区域在场车辆不能进入B区域。防止车主将长时间停放于A区域的车辆开入B区域而逃避停车费</p>
                </div>
              </div>
            </el-form-item>
          </el-form-item>

          <el-form-item label="满位控制">
            <el-checkbox v-model="vipTypeData.openVipFullLimit" v-bind:true-label="1" v-bind:false-label="0"></el-checkbox>
            <el-form-item label="最多可进" label-width="90px" v-show="vipTypeData.openVipFullLimit">
              <el-input v-model.munber="vipTypeData.vipFullLimitValue" placeholder="请输入车辆数量"></el-input>
              <span class="item-unit">辆</span>
            </el-form-item>
            <el-form-item label="满位放行模式" label-width="90px" v-if="vipTypeData.openVipFullLimit" style="margin-bottom:0px;">
              <el-select v-model="vipTypeData.vipFullOpenModel" placeholder="请选择活动区域">
                <el-option label="系统有空位自动放行，无空位手动放行按VIP计费" :value="0"></el-option>
                <el-option label="系统有空位自动放行，无空位手动放行按临时车计费" :value="1"></el-option>
                <el-option label="系统无空位自动放行，按临时车计费" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="按日期">
            <div class="inline-row">
              <el-checkbox v-model="vipTypeData.isDatePrivilege" v-bind:true-label="1" v-bind:false-label="0"></el-checkbox>
              <el-form-item v-show="vipTypeData.isDatePrivilege" label-width="10px">
                <a href="javascript:;" @click="openCalendar()" class="ake_btn ake_btn_text">设置日期表</a>
              </el-form-item>
              <div class="tipsBox" style="left:120px" v-show="vipTypeData.isDatePrivilege">
                <i class="el-icon-question"></i>
                <div class="tips">
                  <p>生效日期</p>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="按时段">
            <div class="inline-row">
              <el-checkbox v-model="vipTypeData.isTimePrivilege" v-bind:true-label="1" v-bind:false-label="0"></el-checkbox>
              <el-form-item label label-width="10px" v-if="vipTypeData.isTimePrivilege">
                <el-time-picker v-model="vipTypeData.priTimeArrFrom" format="HH:mm" :editable="false" start-placeholder="开始时间"></el-time-picker>
              </el-form-item>
              <el-form-item label label-width="10px" v-if="vipTypeData.isTimePrivilege">
                <el-time-picker v-model="vipTypeData.priTimeArrTo" format="HH:mm" :editable="false" end-placeholder="结束时间"></el-time-picker>
              </el-form-item>
              <div class="tipsBox" style="right:-24px" v-if="vipTypeData.isTimePrivilege">
                <i class="el-icon-question"></i>
                <div class="tips right">
                  <p>生效时段</p>
                </div>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="是否计费">
            <template>
              <el-radio :label="1" v-model="vipTypeData.isChargeGroupRelated">支持</el-radio>
              <el-radio :label="0" style="margin-left:15px" v-model="vipTypeData.isChargeGroupRelated">不支持</el-radio>
            </template>
          </el-form-item>

          <div class="other-item-box">
            <div v-if="vipTypeData.isChargeGroupRelated==1">
              <el-form-item prop="chargeGroupCode" v-if="chargeGroupRender">
                <template>
                  <el-table :data="tableData.parkItems" border class="select-park-table" style="width:100%">
                    <el-table-column prop="parkName" label="停车场名称"></el-table-column>
                    <el-table-column prop="optionArr" label="计费组">
                      <template slot-scope="scope">
                        <el-select v-model="tableData.parkItems[scope.$index].chargeGroupCode" placeholder="请选择计费组" v-if="tableData.parkItems[scope.$index].parkSysType==1">
                          <el-option v-for="item in tableData.parkItems[scope.$index].optionArr" :label="item.typeName" :value="item.chargeTypeSeq"></el-option>
                        </el-select>
                        <el-input v-else-if="tableData.parkItems[scope.$index].parkSysType==0" v-model="tableData.parkItems[scope.$index].chargeGroupCode" placeholder="请填写计费组编号"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-form-item>
            </div>
          </div>
        </div>
        <!-- 高级配置 end -->
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click="selectMonthTicketInfoTab('higherTab')" v-if="mouthTicketData.tabName=='basicTab'">
        下一步
        <i class="el-icon-arrow-right el-icon--right"></i>
      </button>
      <button class="ake_btn ake_btn_text" @click="closed('monthlyTicketModal')" v-if="mouthTicketData.tabName=='basicTab'">取消</button>
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitForm('ticketForm')" v-if="mouthTicketData.tabName=='higherTab'">确认</button>
      <button class="ake_btn ake_btn_text" @click="selectMonthTicketInfoTab('basicTab')" v-if="mouthTicketData.tabName=='higherTab'">
        <i class="el-icon-arrow-left"></i>上一步
      </button>
    </div>
  </basic-modal>

  <!--选择停车场树-->
  <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
    <h3 slot="title">选择停车场通道</h3>
    <div class="modal-body" slot="modal-body">
      <div v-show="isShowTree" class="common-tree modal-tree-box">
        <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
      </div>
      <p v-show="!isShowTree" class="noTreeTips">暂无数据；</p>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click="selectParkSure()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal')">取消</button>
    </div>
  </basic-modal>

  <!-- 车辆分类-查看 -->
  <basic-modal ref="specialCarTypeCheck" width="640" customeClass="special-car-type-check" static="true" :needModalFooter="false">
    <h3 slot="title">查看{{specialCarTypeObj.basicData.name}}</h3>
    <div class="modal-body" slot="modal-body" style="padding:0px 0px 20px 0px;">
      <div class="btnGroup">
        <div @click="selectMonthTicketCheckInfoTab('basicTab')" class="btnItem" :class="{activeText:specialCarTypeObj.tabName=='basicTab'}">
          <span class="step-icon" :class="{activeTab:specialCarTypeObj.tabName=='basicTab'}">1</span>
          <span class="step-text">基础信息</span>
        </div>
        <div @click="selectMonthTicketCheckInfoTab('higherTab')" class="btnItem" :class="{activeText:specialCarTypeObj.tabName=='higherTab'}">
          <span class="step-icon" :class="{activeTab:specialCarTypeObj.tabName=='higherTab'}">2</span>
          <span class="step-text">高级配置</span>
        </div>
      </div>
      <div class="basicInfo" v-show="specialCarTypeObj.tabName=='basicTab'">
        <table class="table-info">
          <tr v-if="specialCarTypeObj.basicData.channelArr && specialCarTypeObj.basicData.channelArr.length" class="td-span">
            <td :rowspan="specialCarTypeObj.basicData.channelArr.length">支持车场：</td>
            <td>
              <span>{{specialCarTypeObj.basicData.channelArr[0].parkName}}</span>
              <span>{{specialCarTypeObj.basicData.channelArr[0].channelName}}</span>
            </td>
          </tr>
          <tr v-else>
            <td>支持车场：</td>
            <td></td>
          </tr>
          <tr v-for="(item,index) in specialCarTypeObj.basicData.channelArr" v-if="index>0" class="td-span">
            <td>
              <span>{{item.parkName}}</span>
              <span>{{item.channelName}}</span>
            </td>
          </tr>
          <tr>
            <td width="130">特殊车辆类型：</td>
            <td>{{specialCarTypeObj.basicData.vipGroupTypeStr}}</td>
          </tr>
          <tr>
            <td>类型名称：</td>
            <td>{{specialCarTypeObj.basicData.name}}</td>
          </tr>
          <tr>
            <td>简介：</td>
            <td>{{specialCarTypeObj.basicData.description}}</td>
          </tr>
        </table>
      </div>
      <div class="heightInfo" v-show="specialCarTypeObj.tabName=='higherTab'">
        <table>
          <tr>
            <td class="td-top" width="130">多车多位：</td>
            <td class="more-p">
              <p>{{specialCarTypeObj.superiorData.moreCarMoreSeat}}</p>
              <p v-if="specialCarTypeObj.superiorData.autoSwitchVip=='支持'">支持场内切换</p>
              <p v-if="specialCarTypeObj.superiorData.dynamicFullLimit=='支持'">场内多位多车满位到剩余，同一VIP票车辆外场已在场车辆无法进入内场</p>
            </td>
          </tr>
          <tr>
            <td class="td-top">满位控制：</td>
            <td class="more-p">
              <p>{{specialCarTypeObj.superiorData.openVipFullLimit}}</p>
              <p v-if="specialCarTypeObj.superiorData.vipFullLimitValue">最多可进{{specialCarTypeObj.superiorData.vipFullLimitValue}}辆</p>
              <p v-if="specialCarTypeObj.superiorData.openVipFullLimit=='支持'">{{specialCarTypeObj.superiorData.vipFullOpenModel | vipFullOpenModel}}</p>
            </td>
          </tr>
          <tr>
            <td>按日期：</td>
            <td v-if="specialCarTypeObj.superiorData.isDatePrivilege=='支持'">
              <a href="javascript:;" @click="openCalendar()" class="a_link">查看详情</a>
            </td>
            <td v-else>不支持</td>
          </tr>
          <tr>
            <td>按时段：</td>
            <td v-if="specialCarTypeObj.superiorData.isTimePrivilege=='支持'">{{specialCarTypeObj.superiorData.timeSlot}}</td>
            <td v-else>不支持</td>
          </tr>
          <tr>
            <td class="td-top">是否计费：</td>
            <td v-if="specialCarTypeObj.superiorData.iScharging=='是'" class="more-p">
              <p>是</p>
              <p v-for="(item,index) in tableData.parkItems">
                <span>{{index+1}}.{{item.parkName}}：</span>
                <template v-if="item.parkSysType===0">
                  <span>{{item.chargeGroupCode}}</span>
                </template>
                <template v-else>
                  <span v-for="it in item.optionArr" v-if="it.chargeTypeSeq==item.chargeGroupCode">{{it.typeName}}</span>
                </template>
              </p>
            </td>
            <td v-else>否</td>
          </tr>
        </table>
      </div>
    </div>
  </basic-modal>

  <!-- 日历控件 -->
  <basic-modal ref="multiCalendarModal" customeClass="multi-calendar-modal" static="true" width="100%">
    <a slot="modal-icon-close" class="close" @click="closed('multiCalendarModal')">&times;</a>
    <h3 slot="title">选择日期</h3>
    <div class="modal-body" slot="modal-body">
      <!-- selectedDate: 当前已经选中的日期数组 -->
      <!-- min: 当前可选的最小日期 -->
      <!-- max: 当前可选的最大日期 -->
      <!-- save 点击保存时会调用的方法，回传参数为当前选择的日期数组 -->
      <!-- <calendar :selectedDate="vipTypeData.priDateArrStr" @save="saveCalendar"></calendar> -->
      <calendar v-if="modalStatus===5" :disabledStatus="true" :isCanEdit="false" :selectedDate="specialCarTypeObj.superiorData.priDateArrStr"></calendar>
      <calendar v-else :selectedDate="vipTypeData.priDateArrStr" @save="saveCalendar"></calendar>
    </div>
    <div class="modal-footer" slot="modal-footer"></div>
  </basic-modal>
</div>
</template>

<script>
import common from "@mixins/common.js";
// 日期组件
import Calendar from "@components/calendar/Calendar";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import "../../../assets/js/libs/jquery.ztree.core.min.js";
import "../../../assets/js/libs/jquery.ztree.excheck.min.js";

import js from "./js/specialCarTypeCom.js";
export default {
  name: "specialCarTypeCom",
  mixins: [common, invokeModal, js],
  components: {
    Calendar
  },
  data() {
    return {
      chargeGroupRender: true
    };
  }
};
</script>

<style lang="less" scoped>
@import "../../../assets/less/manage.less";
</style>
